<template>
    <div class="newSong">
        <Title>推荐单曲</Title>
        <div class="songItem" v-for="(item, index) in newSongData" :key="index" v-on:click="selectItem(item.id)">

            <div class="avator">
                <img v-lazy="item.picUrl + '?param=72y72'" />
            </div>

            <div class="songInfo">
                <p class="title">
                    {{ item.name }}
                </p>
                <p class="songContent">
                    <span>{{ item.song.artists | listArr }}</span>==<span>{{ item.song.album.name }}</span>
                </p>
            </div>

            <div class="playBtn">
            </div>
        </div>
    </div>
</template>

<script>
import Title from '../Title/Title.vue';
import { mapState, mapMutations } from 'vuex'
export default {
    props: ['newSongData'],
    components: {
        Title
    },
    methods: {
        selectItem(sid) {
            console.log(sid)
            this.SAVEID(sid)
        },
        ...mapMutations(['SAVEID'])
    },
    computed: {
        ...mapState(['SONG_ID']),
    }
}
</script>

<style scoped>
.playBtn {
    width: 18px;
    height: 18px;
    background: url(../../assets/playbtn.png);
    background-size: cover;
    position: relative;
    top: 13px;
    left: 5px;
}

.songItem {
    display: flex;
    justify-content: space-between;
    padding: 4px 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0;
}

.avator {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avator>img {
    width: 36px;
    height: 36px;
}

.songInfo {
    flex: 1;
    overflow: hidden;
    padding-left: 0 8px;
}

.title {
    color: black;
    font-size: 14px;
    margin: 0;
    padding: 3px 0 3px 4px;
}

.songContent {
    font-size: 12px;
    color: gray;
    margin: 0;
    padding-left: 4px;
}

.title,
.songContent {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>